其實，一開始會有使用 API 的需求，除了需要更進一步的學習之外，最主要是因為有朋友來問我怎麼做網站。我有許多朋友都從是藝術相關工作，他們有做作品集的需求，但可能沒有什麼預算。雖然說架一個 Wordpress 給他們彈性高、對沒有程式背景的人來說也好修改，但如果只是個如名片般的靜態一頁網站，好像沒有需要使用到 Wordpress，何況租虛擬主機來架站也是一筆錢。
可是，如果直接給他們一張 HTML 檔，他們要修改更新作品的時候，又相當麻煩。

如果，他們可以使用現有的服務，比方說 Instagram 、Behance 或 Dribbble，然後將他們已經發表的作品跟作品集網站連起來，只要有人造訪作品集網站，都可以直接看到最新的作品近況，那是不是輕鬆許多？

所以今天就來使用 Behance API 來做這件事情。
Behance 是一個讓設計師跟藝術家分享作品的社群，是 Adobe 旗下的服務之一，以工程師的語彙來說，就是設計師的 Github 了。

來註冊一個帳號取得 API Key：

現在來看看文件：

在這邊，Behance 說如果要在 AJAX application 上使用這個 API 的話，必須以 JSONP 的方式呼叫 API。我還沒使用過 JSONP 呢。
來個教學：JSONP (JSON with Padding)

簡單來說，由於瀏覽器有個**同源政策 (Same Origin Policy)，**如果 AJAX 請求要跨網域就會被擋下來。JSONP 是一個可以繞過此限制的做法。

一如 Behance API 文件 上面所寫，在 request url 後面加上 callback={你的callback}，傳回來的資料就會被丟進 {你的callback} 裡面。

實作之前，我們來看看使用這個 API 可以抓到什麼東西。因為我想做的是個作品集，所以我需要的是抓特定用戶的作品，分類在 User 裡面：

一個抓特定使用者作品列的 API Request URL 是這樣的：

'GET', 'https://api.behance.net/v2/users/{username}/projects?client_id={API Key}

唯一必要的參數就是 username，剩下可選的參數有

• sort ：可依照 featured_date (default)、 appreciations、 views、 comments、 published_date 來排列傳回來的物件
• time：限制抓取的時間範圍，可以是 all (default)、 today、 week、 month
• page：回傳結果頁面的頁數

現在來嘗試實作一下。

首先來把 Request URL 放進一個變數裡，在URL 後面加上 callback=myCallback ，然後寫一個在 HTML 裡產生一個 <script> 的 function：

var url =
  "https://api.behance.net/v2/users/vivianychen/projects?client_id=XrTXvo7P59I8TcXEqP0DDRgxi6Jmx5Rd&callback=myCallback";
  
function sendRequest() {
  var scriptTag = document.createElement("script");
  scriptTag.src = url;
  document.body.appendChild(scriptTag);
}

接著寫出那個 callback，在裡面把 Response log 出來：

function myCallback(response){
  console.log(response);
}

成功～

接下來試著把圖片放進網頁上。首先在 HTML 裡寫出要把圖片放進去的 div container：

// HTML

<div class="img"></div>
<div class="img"></div>
<div class="img"></div>

在 JS 裡抓取這些元素：

//因為 .img 有很多個，所以 imgBoxes 會抓出一個 array 來放所有的 div
var imgBoxes = document.querySelectorAll(".img");

在 myCallback 裡面寫一個傳圖的 function，再寫一個 loop 把取得的圖片一一放進 imgBoxes 這個抓到的 div container:

function myCallback(response) {

    function createImg(i){
    
    //製作要放入 imgBoxes 的 a tag 跟 img tag
    var cover = document.createElement("img");
    var url2img = document.createElement("a");

    //使 img tag 的 source attribute 等於 傳回來 response 裡第 i 個 project 的圖
    //使 a tag 的 href 等於 response 的第 i 個 project 的 url
    cover.src = response.projects[i].covers.original;
    url2img.href = response.projects[i].url;
    
    //第 i 個 imgBoxes 裡放入 a ，a 裡放入 img
    imgBoxes[i].appendChild(url2img);
    url2img.appendChild(cover);
    }
  for(var i = 0; i < 3; i++){
    //重複呼叫 createImg 並傳入 i 的值
    createImg(i);
  }
}

完成。
Codepen 連結